@charset "UTF-8";
/* CSS Document */

/* default sind bei html5 die folgenden element block */
header, nav, section, article, aside, footer {
  display:block;
}

*{  box-sizing: border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

img, audio, video, embed {
  max-width:100%;
  width:auto;
  height:auto;
}

/* TYPO3 Anpassung für Responsive */
DIV.csc-textpic-above DIV.csc-textpic-imagewrap,DIV.csc-textpic-below DIV.csc-textpic-imagewrap,DIV.csc-textpic
DIV.csc-textpic-imagewrap UL LI,DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
  float:none;
}

.body-page-login {
    background-image: url("http://2024.lesoal-luzern.ch/application/files/2517/0256/8353/Handschlag_web.jpg");
}

.login-page-header {
    background-color: #2f52b0;
}
/* login Toolbar ausblenden*/
#ccm-toolbar {
    display: none;
}

html.ccm-toolbar-visible .ccm-page {
  margin-top: 0px;
}

/*----*/

body {
        font-family: 'Quicksand', sans-serif;
    margin: 0em;
    padding: 0em;
}

h1 {
    font-family: 'Quicksand', sans-serif;
    color: #2f52b0;
    font-size: 2.5em;
}

h2 {
    font-family: 'Quicksand', sans-serif;
    color: #2f52b0;
    font-size: 2em;
}

h3 {
    font-family: 'Quicksand', sans-serif;
    font-weight: lighter;
    font-size: 1.8em;
}

h4 {
    font-family: 'Quicksand', sans-serif;
    color: #2f52b0;
    font-size: 1.4em;
    margin-bottom: 0.3em;
}

a {
    color: #2f52b0;
    text-decoration: none;
}

a:hover {
    color: #000;
}

 #ausrichten #content p a {
    margin-bottom: -1em;
}

li::marker {
   color: #2f52b0;
}

hr {
    margin: 2em 0em;
    border-color:#de2004; 
      }

div.ccm-block-feature-item {
    margin-bottom: 0em;
}

#content p, #content li {
    font-size: 1.3em;
    padding-bottom: 0.6em;
    margin-top:0.6em;
}

#content li li {
    font-size: 1em;
}

#content ul ul {
    margin-top: 1em;
}

.ccm-block-page-list-description {
    font-size: 1.3em;
}

.ccm-block-page-list-pages {
    width: 100%;
    height: auto;
    float: left;
    position: relative;
}

div.ccm-block-page-list-page-entry-read-more {
  margin-top: 5px;
    margin-bottom: 0.3em;
}

/* --- Galerie --*/

.ccm-block-gallery  {
    width: 100%;
    float: left;
    margin-bottom: 1em;
}
.ccm-block-gallery .ccm-block-gallery-image {
  width: 45%;
    height: auto;
    float: left;
    margin-right: 5%;
}


.ccm-block-gallery img {
  height: 100%;
}

/* --- Login ---- */

form input {
    margin-bottom: 1em;
}

form label {
    font-size: 1.3em;
    margin-bottom: 0.5em;
}

form a {
   /*font-size: 1.3em; */
    margin-bottom: 0.5em;
}

.col-form-label {
    font-size: 1.3em; 
    margin-bottom: 1em;
    color: #2f52b0;
}

a .btn-secondary {
    margin-right: 1em;
}
/* ---- formular ------ */

.ccm-form {
    width: 100%;
    color: #000;
}

.ccm-form legend {
  display:none;
}

.ccm-form h3 {
  display:none;
}

.ccm-form fieldset {
    border: 1px solid #fff;
    padding: 0px;
    margin: 0px 0px 0px;
    background: #fff none repeat scroll 0% 0%;
}

.btn-primary { /* submitbutton */
  width:10em;
  font-size:1.2em;
  color:#fff!Important;
    background-color: #666 !Important;
    border: 0px solid #EEE!Important;
}

.btn-primary:hover {/* submitbutton */
    background-color: #2f52b0!Important;
    border: 0px solid #EEE!Important;
}


.ccm-form fieldset label {
    width: 100%;
  margin-bottom:0.5em;
  color:#8e194d;
}

.ccm-form fieldset input {
    width: 100%;
  margin-bottom:2em;
  font-family: 'Quicksand', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif;
  font-size:1em;
}

.ccm-form fieldset textarea {
    width: 100%;
  margin-bottom:2em;
  font-family: 'Quicksand', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif;
  font-size:1em;
}

#mobilnavi ul li:nth-child(3) ul ul {
    display: none;
}

/* ---------- Responsive Design -------------- */
#web {
     width:100%;
     height:auto;
} 

#web input .pure-toggle, #web label.pure-toggle-label { /*Button*/
        display: block;
    }

#mobilnavi {
    display: block;
}

#web #mobilnavi .pure-drawer {
   /*overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-perspective: 0;*/
    z-index: 1;
    position: absolute;
    float: left;
    padding-top: 4em;
}


.pure-pusher-container { /* Zentriert das ausrichtendiv */
    align-content: center;
    position: relative;
} 

#ausrichten {
  width:100%;
  height: auto;
    position: relative;
  background-color: #fff;
}

#ausrichten #navi {
    display: none;
}

#ausrichten #logo {
    width: 4em;
    height: auto;
    padding: 0em;
    position: relative;
    float: right;
    margin-right: 2em;
    background-color: #fff;
    -webkit-box-shadow: 0px -1px 32px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -1px 32px -6px rgba(0,0,0,0.75);
    box-shadow: 0px -1px 32px -6px rgba(0,0,0,0.75);
}

#ausrichten #logo img {
    width: 100%;
    min-width: auto;
    height: auto;
}


#ausrichten #kopf {
    display: none;
}

#ausrichten #content {
    width: 100%;
    height: auto;
    padding: 1em;
    position: relative;
    float: left;
}

#ausrichten #footer {
    color: #fff;
    width: 100%;
    height: auto;
    float: left;
    padding: 1em;
    background-color: #2f52b0;
}

#ausrichten #footer #links {
    width: 100%;
    height: auto;
    float: left;
    font-size: 1.3em;
}
#ausrichten #footer #rechts {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 1em;
}

#footer ul {
    padding: 0em;
    margin: 0em;
}

#footer ul li {
    display: inline-block;      
    list-style: none;
    margin-right: 1em;
    }    
    
#footer ul li a {
    font-size:1em;
    text-decoration: none;
    color: #fff;
    }    

#footer a:hover {
    font-weight: bolder;
    }  
    
#footer a.nav-path-selected {
  font-weight:bold;
    color: #fff;
}


.buttunspenden {
    width: 12em;
    background-color: #fff;
    padding: 0.1em 1em;
    text-align: center;
}

.buttunspenden:hover {
    background-color: #8299d5;
}

.buttunspenden a {
    color: #2f52b0;
    font-size: 1.2em;
    font-weight: bold;
}

.buttunspenden a:hover {
    color: #fff;
}

#weiss1, #weiss2, #blau2sp, #blau3sp {
    width: 100%;
    height: auto;
    padding: 1em;
    position: relative;
    float: left;
}

#blau2sp, #blau3sp {
    background-color: #99a9d3;
}

.splinks, .sprechst {
    width: 100%;
    float: left;
}

.sp1, .sp2, .sp3 {
    width: 100%;
    float: left;
    
}

@media screen and (min-width:900px) {

/*login Toolbar einblenden */    
#ccm-toolbar {
    display: block;
}   
html.ccm-toolbar-visible .ccm-page {
  margin-top: 48px;
} 
/* ------ */    
    
    
.ccm-block-gallery .ccm-block-gallery-image {
  width: 30%;
    margin-right: 3%;
}    
.ccm-block-gallery img {
  height: 80%;
}    
    
#mobilnavi {
    display: none;
}    
    
#ausrichten {
    position: static;
}    
    
/*--- mobilnavi ---- */
#web input .pure-toggle, #web label.pure-toggle-label { /*Button*/
        display: none;
    }
/* ---- end mobilnavi --- */
 

#ausrichten #logo {
    position: absolute;
    z-index: 20;
    top: 0em;
    width: 7em;
    padding: 1em 0.5em 0.5em 0.5em;
    right: 15%;
    margin-right: 0em;

    }
    
#ausrichten #navi {
    display: block;
    width: 100%;
    float: left;
    padding: 3em 15% 1em 15%;
    z-index: 5;
}
    
#ausrichten #kopf {
    display: block;
    width: 100%;
    height: auto;
    float: left;
}  
    
#ausrichten #kopf #bild {
    width: 100%;
    height: auto;
    float: left;
    z-index: 1;
} 
    
    #ausrichten #kopf #bild img {
        width: 100%;
        min-width: 100%!Important;
        height: auto;
    }
    
#ausrichten #content {
    padding: 3em 15% 2em 15%;
    }    

#ausrichten #footer {
    padding: 2em 15% 2em 15%; 
    
    }    
       
    
#ausrichten #footer #links {
    width: 60%;
    height: auto;
    float: left;
}
#ausrichten #footer #rechts {
    width: 12em;
    height: auto;
    float: right;
    margin-top: 0em;
}    
  
/* Navigation */    
#navi ul {
    padding:0em; 
    text-align: left;
    margin: 0em 0em -1em 0em;
    position: relative;
    } 
    
#navi ul li {
    display: inline-block;      
    list-style: none;
    margin-right: 2em;
    padding-bottom: 1em;
    }    
    
#navi ul li a {
    font-size:1.5em;
    text-decoration: none;
    color: #666;
    }    

#navi a:hover {
    font-weight: bolder;
    }  
    
#navi a.nav-path-selected {
    font-weight:bold;
    color: #4a4c9a;
}
    
    
    
#navi ul ul {
    width: auto;
    height: auto;
    display: none;
    position: absolute;
    padding: 0.5em;
    margin-top: 1em;
    margin-left: -2em;
    background-color: #2f52b0;
    opacity: 0.9;
    z-index: 10;
  }
    
#navi ul li:hover>ul {
    display: block;
  }
    
#navi ul li.nav-path-selected>ul { 
	display:none;
}
    
#navi ul li.nav-path-selected:hover>ul { 
	display:block;
}  
    
#navi ul ul ul {
    display: block;
  }  
    

#navi ul ul {
    padding: 1em 2em;
    } 
    
#navi ul ul li {
    list-style: none;
    padding: 0.5em 0em;
    display: block;
    }
    
#navi ul ul li a {
    font-size: 1.2em;
    
    color: #fff;
    }
    
#navi ul ul li a:hover {
        font-weight: bolder;
    }
    
#navi ul ul li a.nav-path-selected {
    font-weight: bolder;
    font-size: 1.6em;
    color: #fff;
}    
    
#navi ul ul ul {
        display: block;
        position: relative;
    padding-left: 3em;
    margin-top: 0em;
    }   
    

#navi ul li:nth-child(3) ul li ul {
        display: none !Important;
    }        
    
#navi ul li:nth-child(4) ul li ul {
        display: block !Important;
    }        

    
/* ende Navigation */    

#weiss1, #weiss2, #blau2sp, #blau3sp {
    padding: 3em 15% 2em 15%;
}
    
.splinks, .sprechst {
    width: 50%;
    float: left;
}
    
.splinks {
        padding-right: 1em;
    }    
    
.sprechst {
        padding-left: 1em;
    }    

.sp1, .sp2, .sp3 {
    width: 33%;
    float: left;
    
}  
    
.sp1, .sp2 {
        padding-right: 2em;
    }    

    
}

@media screen and (min-width:1300px) {

#ausrichten #kopf #sub {
    width: 20%;
}
}